<template>
  <div class="list">
    <div class="like">猜你喜欢</div>
    <div class="features">
        <div>综合排序<van-icon name="arrow-down" /></div>
        <div>距离最近</div>
        <div>销量最高</div>
        <div>筛选</div>
    </div>
    <div class="actives">
        <div v-for="(items, index) in arr2" :key="index">{{ items }}</div>
    </div>
    <div class="shopp" v-for="(item, index) in lists" :key="index"  @click="$router.push('/detailed/' + item.mtWmPoiId)">
        <div class="leftbox">
            <img :src="item.picUrl" alt="">
        </div>
        <div class="rightbox">
            <div class="name">{{ item.name }}</div>
            <div style="color: #ff6300;"><van-icon name="star" />{{ item.wmPoiScore/10}} {{ item.monthSalesTip }}</div>
            <div class="num">
                <div>{{item.minPriceTip}} 远距离{{ item.shippingFeeTip }}</div>
                <div>{{ item.deliveryTimeTip }} {{ item.distance }}</div>
            </div>
            <div class="favorable" v-for="(citem,index) in item.discounts2" :key="index">
                <div>{{ citem.info }}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { shop_list } from '../../../utils/api'

export default {
    data() {
        return {
            lists: [],
            arr2: ['年货节热卖', '津贴联盟', '满减优惠', '品质联盟']
        }
    },
    mounted() {
        shop_list({}).then((res) => {
            this.lists = res.data.list;
            // console.log(this.lists);
        })

    }
}
</script>

<style lang="scss" scoped>
.like {
    background-color: white;
    width: 95%;
    margin: 4px 2.5%;
}

.features {
    width: 95%;
    margin: 0 2.5%;
    display: flex;
    justify-content: space-between;
    background-color: white;
}

.actives {
    width: 95%;
    margin: 0 2.5%;
    display: flex;
    justify-content: space-between;
    background-color: white;
}

.actives div {
    background-color: rgb(211, 202, 202);
    margin: 4px;
}

.shopp {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 4px 2.5%;
}

.shopp .leftbox {
    width: 80px;
    height: 80px;
}

.shopp .leftbox img {
    width: 100%;
}

.shopp .rightbox .num {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}
.shopp .rightbox .favorable div{
    float: left;
    border: 1px solid #ec8375;
    margin: 1px 3px;
    color: #bd776e;
}
.shopp .rightbox {
    text-align: left;
    width: 253px;
}
</style>